<template>
	<view class="exam-rank">
		<view class="exam-rank-name">{{itemData.examName}}</view>
		<view class="exam-rank-score">{{itemData.score}}</view>
		<view class="exam-rank-rank">{{itemData.rank}}</view>
		<view class="exam-rank-analysis">{{analysis}}</view>
	</view>
</template>

<script>
	import {isEmpty} from '@/utils/index';
	export default {
		props: {
			itemData: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		computed:{
			analysis(){
				if(isEmpty(this.itemData)){
					return '';
				}else{
					const analysis = this.itemData.analysis;
					if(isEmpty(analysis)||parseInt(analysis).toString()=='NaN'){
						return '-';
					}
					const abs = Math.abs(analysis);
					return analysis>0?`进步${abs}名`:`退步${abs}名`;
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.exam-rank {
		display:flex;
		align-items:center;
		font-size: 28upx;
		padding: 24upx 0;
		color: #5ea1f8;
		border-bottom: 2upx dashed  #d7e5ff;

		&-name {
			display: inline-block;
			width: 35%;
			color: #333333;
			padding-left: 20upx;
		}
		&-score {
			text-align: center;
			display: inline-block;
			width: 20%;
		}
		&-rank {
			text-align: center;
			display: inline-block;
			width: 20%;
		}
		&-analysis {
			display: inline-block;
			width: 25%;
			text-align: right;
			padding-right: 20upx;
		}
	}
</style>
